<template>
  <div class="detailInfo">
    <!-- 商品信息 -->
    <div class="good">
      <div class="left" v-if="showImg">
        <img :src="showImg" />
      </div>
      <div class="right" v-if="showItem">
        <div class="top fz20">￥{{ showItem.goods_price }}</div>
        <div class="buttom fz12">
          <span>库存:{{ goodsNum }}件</span>
          <span>编号:{{ showItem.goods_id }}</span>
        </div>
      </div>
    </div>
    <!-- 配送区域 暂时不需要 -->
    <!-- <div class="area fz14">
      <div class="title">配送区域</div>
      <div class="group">
        <div class="left"><img src="@/assets/编组 4备份 4@2x.png" /></div>
        <div class="center">上海市浦东新区洲海路森兰美伦A栋1103</div>
        <div class="right">></div>
      </div>
    </div> -->
    <!-- 规格类型 -->
    <div class="type fz14">
      <div class="title">规格类型</div>
      <van-radio-group
        class="group"
        checked-color="#ff3040"
        v-model="radio"
        direction="horizontal"
      >
        <van-radio
          v-for="item in goodInfo"
          :key="item.id"
          :name="item.id"
          class="spec"
          :id="item.id == radio ? 'active' : ''"
        >
          {{ item.goods_standard }}
        </van-radio>
        <!-- <van-radio name="2" class="spec" :id="radio == 2 ? 'active' : ''"
          >套装</van-radio
        >
        <van-radio name="3" class="spec" :id="radio == 3 ? 'active' : ''"
          >院装</van-radio
        > -->

        <!-- 要改 -->
      </van-radio-group>
    </div>
    <!-- 购买数量 -->
    <div class="quantity fz14">
      <div class="title">购买数量</div>
      <!-- <van-stepper v-model="quantity" /> -->
      <van-stepper
        v-model="quantity"
        min="1"
        :max="goodsNum"
        input-width="20px"
        button-size="32px"
      />
    </div>
    <!-- 立即购买 -->
    <van-button
      class="pay"
      @click="toAddCloud"
      color="linear-gradient(to right,  #FF5BF4,#622CCC)"
    >
      加入云仓
      <!-- {{ this.value === 0 ? '立即提货' : ' 加入云仓' }} -->
    </van-button>
  </div>
</template>

<script>
import { getGoodsInfo } from '@/api/index.js'
import { addCloudAddDepot } from '@/api/cloud.js'

export default {
  //   props: ['value'],
  created() {
    // this.item = this.$route.query
    // console.log(this.item)
    // this.showItem = this.goodInfo.goodsStandard[0]
    this.getGoodsInfo()
    this.id = this.$route.query.id
  },
  data() {
    return {
      showImg: '',
      quantity: 1,
      radio: 1,
      showItem: '',
      goods_name: '',
      goodsNum: 0
    }
  },
  methods: {
    checkSpecActive(num) {
      this.activenum = num
    },
    // 加入商品到云仓
    async toAddCloud() {
      //   console.log(this.showItem)
      //   console.log(this.quantity)
      //   this.$toast('商品添加云仓成功,进入云仓')
      //   console.log(this.goods_name)
      //   console.log(this.showItem.goods_price)
      //   console.log(this.showItem.goods_standard_id)
      //   console.log(this.showItem.goods_standard)
      //   console.log(this.quantity)
      try {
        const res = await addCloudAddDepot({
          id: this.id,
          goods_name: this.goods_name,
          goods_price: this.showItem.goods_price,
          goods_standard_id: this.showItem.goods_standard_id,
          goods_standard: this.showItem.goods_standard,
          goods_num: this.quantity
        })
        // console.log(res)
        if (res.code !== 200) {
          //   console.log(res)
          return this.$toast(res.msg)
        }
        this.$toast('商品添加云仓成功,进入云仓')
        // console.log(res)
      } catch (error) {
        console.log(error)
      }
      //   发请求添加到云仓

      this.$router.push('/myCloud')
    },
    // 根据id获取商品信息
    async getGoodsInfo() {
      try {
        const res = await getGoodsInfo(this.$route.query.id)
        this.goodInfo = res.data.goodsStandard
        console.log(res.data)
        console.log(this.goodInfo)
        await this.$nextTick()
        this.showImg = res.data.goodsShow[0].url //要显示的产品图
        this.goods_name = res.data.goods_name //加入云仓用到的产品名
        this.radio = this.goodInfo[0].id //默认规格类型
        this.showItem = this.goodInfo[0] //默认显示的项目
        this.goodsNum = this.goodInfo[0].goods_num //默认显示的库存
      } catch (error) {
        console.log(error)
      }
    }
  },
  watch: {
    async radio(val) {
      //普通的watch监听
      this.radio = val
      console.log(val)
      //   this.getGoodsInfo()
      //   goods_num
      const newItem = this.goodInfo.filter(item => item.id == val)
      this.showItem = newItem[0]
      this.goodsNum = this.showItem.goods_num //默认显示的库存
      console.log(newItem)
    }
    //  b:{//深度监听，可监听到对象、数组的变化
    //      handler(val, oldVal){
    //          console.log("b.c: "+val.c, oldVal.c);
    //      },
    //      deep:true //true 深度监听
    //  }
  }
}
</script>

<style lang="less" scoped>
.detailInfo {
  padding-bottom: 10px;
  .good {
    display: flex;
    align-items: flex-end;
    padding: 30px 16px;
    .left {
      width: 90px;
      height: 90px;
      border-radius: 8px;
      margin-right: 16px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .buttom {
      margin-top: 10px;
      span {
        margin-right: 16px;
      }
    }
  }
  // 配送区域
  .area {
    // background-color: #ccc;
    margin: 16px;
    height: 60px;
    .group {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #afabb7;
    }
  }
  // 规格类型
  .type {
    // background-color: #ccc;
    margin: 16px;
    height: 60px;
    .group {
      margin-top: 12px;
      display: flex;

      .spec {
        margin-right: 12px;
        padding: 1px 10px;
        background: #f7f6fb;
        border-radius: 4px;
      }
      ::v-deep {
        .van-radio__label {
          margin-left: -1px;
        }
        .van-radio__icon {
          display: none;
        }
        #active {
          border-radius: 5px;
          background: #622ccc;

          .van-radio__label {
            color: #fff;
          }
        }
      }

      //   align-items: center;
      //   justify-content: space-between;
      //   color: #afabb7;
    }
  }
  //   购买数量
  .quantity {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 124px;
  }
}
</style>
